<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="en" xmlns:display="http://www.w3.org/1999/xhtml">
	<head>
		<!-- 指定字符集 -->
		<meta charset="utf-8">
		<!-- 使用Edge最新的浏览器的渲染方式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>购物车</title>

		<!-- 1. 导入CSS的全局样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="style.css">
		<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<!-- 3. 导入bootstrap的js文件 -->
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			td,
			th {
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			var maxPage;
			var currentpage;
			$(function (){
				$("#info").empty();
				$.ajax({
					type:"get",
					url:"manage/rawmaterial.do?pageNum=1",
					dataType:"json",
					success:function (data){
						$.each(data,function (i,n){
							$("#info").append("<tr>")
							.append("<td>"+n.id+"</td>")
							.append("<td>"+n.name+"</td>")
							.append("<td>"+n.num+"</td>")
							.append("<td>"+n.price+"</td>")
							.append("<td>"+"<a class='btn btn-default btn-sm' onclick='modify("+n.id+")'>修改</a>&nbsp;"
									+"<a class='btn btn-default btn-sm' onclick='deleteone("+n.id+")'>删除</a>"+"</td>")
							.append("</tr>")
						})
					}
				})
				//查询总页数
				$.ajax({
					type:"get",
					url:"manage/findCount.do",
					dataType:"json",
					success:function (data) {
						maxPage=data.result;
					}
				})
				$("#previous").click(function () {
					fenye(currentpage-1);
				})
				$("#txt").text("共"+maxPage+"条记录，共5页");

			})
			function deleteone(obj){
				if(confirm("确认要删除吗")){
					$.ajax({
						type: "get",
						url: "manage/deletemateial.do",
						dataType: "json",
						data:{
							"id":obj
						},
						success:function (data){
							if(data.result==1){
								alert("删除成功");
								window.location.reload();
								/*location.href="shoop.html";*/
							}
						}
					})
					return true;
				}else{
					return false;
				}

			}
			function modify(obj) {
				$.cookie('the_cookie', obj);
				location.href="updatematerial.html"
				/*location.href= 'updatematerial.html?id ='+obj*/
			}
			//分页查询
			function fenye(obj){
				currentpage=obj;
				$("#info").empty()
				$.ajax({
					type:"get",
					url:"manage/rawmaterial.do",
					data:{
						"pageNum":obj
					},
					dataType:"json",
					success:function (data){
						$.each(data,function (i,n){
							$("#info").append("<tr>")
									.append("<td>"+n.id+"</td>")
									.append("<td>"+n.name+"</td>")
									.append("<td>"+n.num+"</td>")
									.append("<td>"+n.price+"</td>")
									.append("<td>"+"<a class='btn btn-default btn-sm' onclick='modify("+n.id+")'>修改</a>&nbsp;"
											+"<a class='btn btn-default btn-sm' onclick='deleteone("+n.id+")'>删除</a>"+"</td>")
									.append("</tr>")
						})
					}
				})
			}

		</script>
	</head>
	<body>
		<div class="page-top">
			<div class="container">
				<div class="top-lt">
					<a href="">同乡烩</a>
					<span>|</span>
					<a href="adm/pages/index.html">管理员</a>
					<span>|</span>
					<a href="">待定</a>
					<span>|</span>
					<a href="">待定</a>
					<span>|</span>
					<a href="">待定</a>
					<span>|</span>
					<a href="">待定</a>
					<span>|</span>
					<a href="">待定</a>
					<span>|</span>
				</div>
		
				<div class="top-gt">
					<div class="login">
						<a href="login.html">登录</a>
						<span>|</span>
						<a href="register.html">注册</a>
						<span>|</span>
						<a href="">购物车</a>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<h3 style="text-align: center">购物车</h3>
			<table border="1" class="table table-bordered table-hover">
				<thead>
				<tr class="warning">
					<th>编号</th>
					<th>原材料名</th>
					<th>数量</th>
					<th>单价</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody id="info">
				</tr><tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
					<td>1</td>
					<td>广东</td>
					<td>123456</td>

					<td>
						<a class="btn btn-default btn-sm" href="#">修改</a>&nbsp;<a
							class="btn btn-default btn-sm" href="#">删除</a></td>
				</tr><tr>
					<td>1</td>
					<td>张三</td>
					<td>男</td>
					<td>1</td>
					<td>广东</td>
					<td>123456</td>

					<td>
						<a class="btn btn-default btn-sm" href="#">修改</a>&nbsp;<a
							class="btn btn-default btn-sm" href="#">删除</a></td>
				</tr>

				<tr>
					<td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加选择</a></td>
				</tr>
				</tbody>
			</table>

		</div>
		<nav aria-label="Page navigation">
			<ul class="pagination">
				<li>
					<a href="#" aria-label="Previous">
						<span aria-hidden="true" id="previous">上一页</span>
					</a>
				</li>
				<li><a href="#" onclick="fenye(1)">1</a></li>
				<li><a href="#" onclick="fenye(2)">2</a></li>
				<li><a href="#" onclick="fenye(3)">3</a></li>
				<li><a href="#" onclick="fenye(4)">4</a></li>
				<li><a href="#" onclick="fenye(5)">5</a></li>
				<li>
					<a href="#" aria-label="Next">
						<span aria-hidden="true" id="next">下一页</span>
					</a>
				</li>
				<span id="txt"></span>
			</ul>

		</nav>
	</body>
</html>
